<template>
  <div class="page">
    <div class="form">
      <el-form ref="form" :model="pageAjax.data" inline>
        <template>
          <div class="list">
            <el-form-item label="主播号：">
              <el-input v-model="pageAjax.data.anchorNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="主播昵称：">
              <el-input v-model="pageAjax.data.anchorNick" disabled></el-input>
            </el-form-item>
            <el-form-item label="选择直播平台：">
              <el-select
                v-model="pageAjax.data.platform"
                disabled
                placeholder="选择直播平台"
              >
                <el-option
                  v-for="item in biPlatformList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发放月份：">
              <el-date-picker
                disabled
                v-model="pageAjax.data.provideMonth"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择月"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="备案金额：">
              <el-input
                v-model="pageAjax.data.recordAmount"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="实际发放：">
              <el-input
                v-model="pageAjax.data.actualAmount"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="pageAjax.data.remark" disabled></el-input>
            </el-form-item>
          </div>
        </template>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getSalary } from "@/api/finance";

export default {
  props: {
    biPlatformList: {
      type: Array
    },
    id: {
      type: Number
    }
  },
  data() {
    return {
      pageAjax: {
        data: {}
      }
    };
  },
  methods: {
    getPageData() {
      let _that = this;
      let id = _that.id;
      getSalary({ params: { salaryId: id } })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data || {};
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },
    rCancel() {
      this.pageAjax.data = {};
      this.$emit("cancel");
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding-top: 60px;
  .top {
    height: 50px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .form {
    height: calc(100% - 60px);
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    overflow: auto;
    padding: 15px;
    box-sizing: border-box;
  }

  .diy-uploadBtn {
    display: inline-block;
    margin-right: 15px;
  }
}
</style>
<style lang="scss">
.page {
  .el-drawer__header {
    position: relative;
    z-index: 10;
  }
}
</style>
